import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';

type requestColorOpts = {
  GET: string;
  POST: string;
  PUT: string;
  DELETE: string;
};

export const columns: BasicColumn[] = [
  {
    title: '用户名',
    dataIndex: 'username',
    width: 160,
    align: 'left',
  },
  {
    title: '用户操作',
    dataIndex: 'operation',
  },
  {
    title: '接口地址',
    dataIndex: 'url',
  },
  {
    title: '请求类型',
    dataIndex: 'requestType',
    width: 80,
    customRender: ({ record }) => {
      const colorOptions: requestColorOpts = {
        GET: '#61AFFE',
        POST: '#49CC90',
        PUT: '#FCA130',
        DELETE: '#F93E3E',
      };
      const method = record.requestType;
      const color = colorOptions[method];
      return h(Tag, { color: color }, () => method);
    },
  },
  {
    title: '是否成功',
    dataIndex: 'isSuccess',
    width: 80,
    customRender: ({ record }) => {
      const status = record.isSuccess;
      const color = status ? 'green' : 'red';
      const text = status ? '请求成功' : '请求失败';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '请求方法',
    dataIndex: 'method',
    width: 200,
  },
  {
    title: '请求参数',
    dataIndex: 'params',
  },
  {
    title: '执行时长(毫秒)',
    dataIndex: 'optime',
    width: 120,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 180,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'username',
    label: '用户',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'operation',
    label: '用户操作',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'url',
    label: '接口地址',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'requestType',
    label: '请求类型',
    component: 'Select',
    componentProps: {
      options: [
        { label: 'GET', value: 'GET' },
        { label: 'POST', value: 'POST' },
        { label: 'DELETE', value: 'DELETE' },
        { label: 'PUT', value: 'PUT' },
      ],
    },
    colProps: { span: 8 },
  },
  {
    field: 'isSuccess',
    label: '是否成功',
    component: 'Select',
    componentProps: {
      options: [
        { label: '成功', value: true },
        { label: '失败', value: false },
      ],
    },
    colProps: { span: 8 },
  },
];
